<template>
  <div class="analysis-diagnosis">
    <!-- 顶部栏 -->
    <div class="headers">
      <div class="header-left">
        <!-- <span class="header-icon"></span> -->
        <span class="title">生产效率分析诊断</span>
        <!-- <span class="header-gradient"></span> -->
      </div>
      <!-- <el-date-picker
        v-model="dateRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        format="YYYY-MM-DD"
        class="date-picker"
      /> -->
      <el-select v-model="teamDateType" placeholder="时间范围" style="width: 100px" @change="dateChange('team', teamDateType)">
          <el-option v-for="item in dateTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-date-picker
          v-if="teamDateType === 'day'"
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="margin-left: 10px; width: 240px;"
          value-format="YYYY-MM-DD-HH:mm:ss.SSSSSS"
          :picker-options="pickerOptions"
          :format="'YYYY-MM-DD'"
          :locale="zhCn"
        />
        <el-date-picker
          v-else
          v-model="monthRange"
          type="monthrange"
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          style="margin-left: 10px; width: 240px;"
          value-format="YYYY-MM"
          :format="'YYYY-MM'"
          :locale="zhCn"
          placeholder="请选择月份范围"
        />
    </div>

    <div class="main-content">
      <!-- 左侧 -->
      <div class="left-panel">
        
        <div class="left-row">
          <div class="card-lg card-lgs">
            <div class="card-bj">
              <span class="card-title">机时产量趋势图</span>
            </div>
            <trend-line-chart :data="trendData" />
          </div>
          <div class="card-lg card-lgs">
            <div class="card-bj">
              <span class="card-title">未完成原因</span>
            </div>
            <reason-input v-model="unfinishedReason" />
            
          </div>
        </div>

        <div class="left-row">

          <div class="card-lg">
            <div class="card-bj">
              <span class="card-title">工艺效率 酸洗速度</span>
            </div>
            <ring-chart :data="ringData1" title="工艺效率 酸洗速度" type="pe" />
          </div>
          

        </div>
        <div class="left-row">
          <div class="card-lg">
            <div class="card-bj">
              <span class="card-title">生产异常统计</span>
            </div>
            <ring-chart :data="ringData3" title="生产异常统计" type="ap" />
            
          </div>
        </div>

        

      </div>



      <!-- 中部 -->
      <div class="center-panel">
        <div class="center-row">
          <div class="card-bj">
            <span class="card-title">出口轧制效率 轧机电流低</span>
            
          </div>
          <bar-chart :data="barData1" title="" />
          
          <!-- <div class="card card-md">
            <bar-chart :data="barData2" title="出口轧制效率 轧机电流分配不均" />
          </div> -->
          <!-- <div class="card card-sm">
            <data-table :data="processData" title="工艺效率 酸洗流程" />
          </div>
          <div class="card card-sm">
            <ring-chart :data="ringData1" title="工艺效率" />
          </div> -->
        </div>
        <div class="center-row">
          <div class="card-bj">
            <span class="card-title">入口生产效率 生产节凑</span>
            
          </div>
          <speed-bar :data="inputEfficiencyData" title="" />

          <!-- <div class="card-lg">
            <speed-bar :data="speedData" title="速率符合率" />
          </div> -->
        </div>

        <div class="center-row">
          <div class="card-bj">
            <span class="card-title">班组生产效率</span>
            
          </div>
          <ring-chart :data="ringData4" title="" type="tpe" />
        </div>


      </div>

      <!-- 右侧 -->
      <div class="right-panel">
        <div class="right-row">
          <!-- <div class="card card-sm">
            <data-table :data="activeUsageData" title="1#活套使用率" />
          </div> -->

          <div class="card-bj">
            <span class="card-title">出口轧制效率 轧机电流分配不均</span>
            
          </div>
          <bar-chart :data="barData2" title="" />

        </div>

        <div class="right-row">
          <div class="card-bj">
            <span class="card-title">1#活套使用率</span>
            
          </div>

          <ring-chart :data="activeUsageData" title="" type="ur" />
          

        </div>

        <div class="right-row">
          <div class="card-bj">
            <span class="card-title">速率符合率</span>
            
          </div>
          <speed-bar :data="speedData" title="" />

        </div>


        <!-- <div class="right-row">
          <div class="card card-sm">
            <data-table :data="productionStatsData" title="生产异常统计" />
          </div>
          <div class="card card-sm">
            <ring-chart :data="ringData3" title="生产异常统计" />
          </div>
        </div>
        <div class="right-row">
          <div class="card card-sm">
            <data-table :data="teamEfficiencyData" title="班组生产效率" />
          </div>
          <div class="card card-sm">
            <ring-chart :data="ringData4" title="班组生产效率" />
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
// 引入自定义组件
import TrendLineChart from './components/TrendLineChart.vue'
import ReasonInput from './components/ReasonInput.vue'
import BarChart from './components/BarChart.vue'
import RingChart from './components/RingChart.vue'
import DataTable from './components/DataTable.vue'
import SpeedBar from './components/SpeedBar.vue'


// 折线图数据
const trendData = ref({
  x: ['05-13', '05-15', '05-17', '05-19', '05-21', '05-23', '05-25', '05-27'],
  y: [45, 60, 38, 55, 70, 50, 65, 48]
})

const unfinishedReason = ref('')

// 柱状图数据
const barData1 = ref({
  x: ['1#机架', '2#机架', '3#机架', '4#机架', '5#机架'],
  series: [
    { name: '钢种#205', data: [30, 30, 30, 30, 30], color: '#00eaff' }
  ]
})
const barData2 = ref({
  x: ['1#机架', '2#机架', '3#机架', '4#机架', '5#机架'],
  series: [
    { name: '钢种#205', data: [30, 30, 30, 30, 30], color: '#ffb74d' }
  ]
})

// 工艺效率表格
const processData = ref({
  columns: [
    { label: '钢种', prop: 'steel' },
    { label: '实际酸洗流程', prop: 'actual' },
    { label: '理论酸洗流程', prop: 'theory' },
    { label: '总产量', prop: 'total' }
  ],
  dataSource: [
    { steel: '#205', actual: 30, theory: 30, total: 30 },
    { steel: '#205', actual: 30, theory: 30, total: 30 }
  ]
})

// 工艺效率环形图
const ringData1 = ref([
  { value: 30, name: '数据一', color: '#00eaff' },
  { value: 70, name: '数据二', color: '#00ffb0' }
])

// 入口生产效率表格
const inputEfficiencyData = ref({
  columns: [
    { label: '钢种', prop: 'steel' },
    { label: '开卷机时序', prop: 'open' },
    { label: '焊接时序', prop: 'thick' },
    { label: '重焊次数', prop: 'repeat' },
    { label: '切头异常', prop: 'abnormal' }
  ],
  dataSource: [
    { steel: '#205', open: 360, thick: 370, repeat: 3, abnormal: 365 },
    { steel: '#205', open: 360, thick: 370, repeat: 3, abnormal: 365 }
  ],
  y: ['#205', '#207','#208','#209','#204'],
  series: [
    { data: [4, 5,7,6,2], color: '#00eaff' }
  ]
})

// 速率符合率条形图
const speedData = ref({
  columns: [
    { label: '钢种', prop: 'steel' },
    { label: '入口速度', prop: 'input' },
    { label: '工艺速度', prop: 'process' },
    { label: '轧机入口', prop: 'machineIn' },
    { label: '轧机出口', prop: 'machineOut' }
  ],
  dataSource: [
    { steel: '#205', input: 360, process: 370, machineIn: 30, machineOut: 365 },
    { steel: '#205', input: 360, process: 370, machineIn: 30, machineOut: 365 }
  ],
  y: ['#205', '#207','#208','#209','#204'],
  series: [
    { data: [4, 5,7,6,2], color: '#00eaff' }
  ]
})

// 1#活套使用率表格
const activeUsageData = ref([
  { value: 30, name: '数据一', color: '#00eaff' },
  { value: 70, name: '数据二', color: '#00ffb0' }
])

// 1#活套使用率环形图
const ringData2 = ref([
  { value: 30, name: '活套', color: '#00eaff' },
  { value: 70, name: '其他', color: '#00ffb0' }
])

// 生产异常统计表格
const productionStatsData = ref({
  columns: [
    { label: '钢种', prop: 'steel' },
    { label: '实际异常', prop: 'actual' },
    { label: '理论异常', prop: 'theory' },
    { label: '停机次数', prop: 'stop' }
  ],
  dataSource: [
    { steel: '#205', actual: 30, theory: 30, stop: 30 },
    { steel: '#205', actual: 30, theory: 30, stop: 30 }
  ]
})

// 生产异常统计环形图
const ringData3 = ref([
  { value: 30, name: '异常', color: '#ff4081' },
  { value: 70, name: '正常', color: '#00eaff' }
])

// 班组生产效率表格
const teamEfficiencyData = ref({
  columns: [
    { label: '班组', prop: 'team' },
    { label: '产量', prop: 'output' },
    { label: '机时产量', prop: 'machine' },
    { label: '生产效率', prop: 'efficiency' }
  ],
  dataSource: [
    { team: '#205', output: 30, machine: 30, efficiency: 30 },
    { team: '#205', output: 30, machine: 30, efficiency: 30 }
  ]
})

// 班组生产效率环形图
const ringData4 = ref([
  { value: 30, name: '效率', color: '#00eaff' },
  { value: 70, name: '其他', color: '#00ffb0' }
])

const teamDateType = ref('day');

const dateTypeOptions = ref([
  { value: 'day', label: '日' },
  { value: 'month', label: '月' },
]);
// 创建指定日期的Date对象
const date = new Date();
const dateRange = ref<[string, string]>([
  formatDateToApi(date, true),
  formatDateToApi(new Date(), false)
]);
const monthRange = ref<string[]>([]);

// 智能快捷选项
const pickerOptions = {
  shortcuts: [
    {
      text: '今天',
      onClick(picker: any) {
        const d = new Date();
        picker.$emit('pick', [formatDateToApi(d, true), formatDateToApi(d, false)]);
      },
    },
    {
      text: '昨天',
      onClick(picker: any) {
        const d = new Date();
        d.setDate(d.getDate() - 1);
        picker.$emit('pick', [formatDateToApi(d, true), formatDateToApi(d, false)]);
      },
    },
    {
      text: '本月',
      onClick(picker: any) {
        const d = new Date();
        const start = new Date(d.getFullYear(), d.getMonth(), 1);
        const end = new Date(d.getFullYear(), d.getMonth() + 1, 0);
        picker.$emit('pick', [formatDateToApi(start, true), formatDateToApi(end, false)]);
      },
    },
  ],
};

function formatDateToApi(dt: Date, isStart = true) {
  const y = dt.getFullYear();
  const m = String(dt.getMonth() + 1).padStart(2, '0');
  const d = String(dt.getDate()).padStart(2, '0');
  if (isStart) {
    return `${y}-${m}-${d}-00:00:00.000000`;
  } else {
    return `${y}-${m}-${d}-23:59:59.999999`;
  }
}

const dateChange = (type: string, value: string) => {
  // Handle date type changes here
  console.log('Date type changed:', type, value);
};
</script>

<style scoped>
.analysis-diagnosis {
  background: linear-gradient(135deg, #0a1a2a 60%, #133b6e 100%);
  color: #fff;
  min-height: 100vh;
  /* padding: 24px 18px 18px 18px; */
  font-family: 'Microsoft YaHei', Arial, sans-serif;
}
.headers {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  position: relative;
  
  
}
.header-left {
  display: flex;
  align-items: center;
  position: relative;
  width:80%;
  height: 46px;
  background: url('/src/assets/images/cut328.png') repeat-x;
}
.header-icon {
  width: 8px;
  height: 32px;
  background: linear-gradient(180deg, #00eaff 0%, #005b8a 100%);
  border-radius: 4px;
  margin-right: 12px;
}
.header-gradient {
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 220px;
  height: 6px;
  background: linear-gradient(90deg, #00eaff 0%, rgba(0,234,255,0) 100%);
  border-radius: 3px;
  opacity: 0.7;
}
.title {
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #fff;
  z-index: 2;
  margin-left:20px;
  margin-top:10px;
}
.card-bj{
  background-image: url('/src/assets/images/cut331.png');
  height: 26px;
  padding-top:5px;
  margin-bottom: 4px;
}
.card-title{
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #fff;
  z-index: 2;
  margin-left:20px;

  
}
.date-picker {
  min-width: 260px;
  background: #1a2b47 !important;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  padding: 4px 10px;
}
.main-content {
  display: flex;
  gap: 12px;
  height: calc(100vh - 100px);
}
.left-panel {
  width: 33.33%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: space-between;
}
.center-panel {
  width: 33.33%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: space-between;
}
.center-row {
  width: 100%;
  height: 50%;
}
.right-panel {
  width: 33.33%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: space-between;
}
.right-row {
  width: 100%;
}
.card {
  background: rgba(20,35,60,0.95);
  border: 1.5px solid rgba(0,234,255,0.13);
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0,234,255,0.08);
  padding: 10px 8px 8px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 0;

}
.left-row {
  width: 100%;
  display: flex;
  gap: 12px;
}
.card-lg {
  flex: 1;
  min-height: 180px;
  max-height: 50%;
}
.card-lgs:first-child {
  flex: 0 0 60%;
}
.card-lgs:last-child {
  flex: 0 0 40%;
  padding-right:12px;
}
.card-md {
  flex: 1 1 0;
  min-width: 0;
  min-height: 180px;
}
.card-sm {
  flex: 1 1 0;
  min-width: 0;
  min-height: 180px;
  max-width: 50%;
}
/* 标题左侧蓝条 */
.card :deep(.title), .card :deep(.data-table .title) {
  position: relative;
  padding-left: 14px;
  font-weight: bold;
  color: #00eaff;
  font-size: 16px;
  margin-bottom: 8px;
}
.card :deep(.title)::before, .card :deep(.data-table .title)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 5px;
  height: 18px;
  background: linear-gradient(180deg, #00eaff 0%, #005b8a 100%);
  border-radius: 2px;
}


:deep(.el-select__wrapper) {
  background-color: transparent !important;
}

:deep(.el-input__wrapper) {
  background-color: #223671 !important;
  box-shadow: none !important;
}



</style>



